@charset "UTF-8";
@import "./common.scss";
@import "../fonts/iconfont.css";

.web{
	// header{
	// 	background-color: red;
	// }
	main{
		.introduce{
			background-color: #222222;
			padding: 4vw 6vw 2vw;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: relative;
			.left{
				display: flex;
				justify-content: space-between;
				margin-bottom: 4vw;
				width: 31vw;
			}
			.hand{
				position: absolute;
				width: 23vw;
				height: 29vw;
				overflow: hidden;
				top: 0vw;
				left: 20.5vw;
				img{
					width: 85%;
				}
				button{
					border: none;
					background-color: #ff6b56;
					position: absolute;
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 1vw;
					letter-spacing: 0vw;
					color: #ffffff;
					// flex-wrap: nowrap;
					left: 8vw;
					top: 14.5vw;
				}
				button:hover{
					cursor: pointer;
				}
				p{
					position: absolute;
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 1.5vw;
					letter-spacing: 0vw;
					color: #a1a1a1;
					bottom: 8.9vw;
					left: 6vw;
				}
			}
			.center{
				margin: 0 auto;
				width: 18vw;
				height: 38vw;
				overflow: hidden;
				img{
					width: 100%;
				}
				
			}
			.center:hover{
				transform: scale(0.8);
				transition: all .3s;
			}
			.content{
				position: absolute;
				top: 6.3vw;
				right: 17vw;
				h2{
					font-size: 2vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 5vw;
					letter-spacing: 0vw;
					color: #2ce4ca;
				}
				h3{
					font-size: 3vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 1vw;
					letter-spacing: 0vw;
					color: #2ce4ca;
				}
				span{
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 1vw;
					letter-spacing: 0vw;
					color: #a1a1a1;
					display: block;
					margin-top: 2.1vw;
				}
				p{
					margin-top: 0.5vw;
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 1vw;
					letter-spacing: 0vw;
					color: #a1a1a1;
				}
				button{
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 1vw;
					letter-spacing: 0vw;
					color: #ffffff;
					background-image: linear-gradient(#14beb0,#0d9f90);
					padding: 1vw 1.3vw;
					border-radius: 10vw;
					margin-top: 1.5vw;
				}
				button:hover{
					cursor: pointer;
				}
			}
			.right{
				display: flex;
				justify-content: space-between;
				margin-bottom: 4vw;
				width: 31vw;
			}
		}
	}
	.step{
		padding-top: 6vw;
		padding-bottom: 3vw;
		position: relative;
		.imgLeft1{
			position: absolute;
			width: 8vw;
			height: 7vw;
			top: 0.1vw;
			left: 3vw;
			img{
				width: 100%;
			}
		}
		.imgRight1{
			position: absolute;
			width: 7vw;
			height: 7vw;
			bottom: 2.5vw;
			right: 5vw;
			img{
				width: 100%;
			}
		}
		.step1{
			display: inline-block;
			margin-left: 21vw;
			text-align: center;
			.imgBox{
				width: 11vw;
				height: 12vw;
				overflow: hidden;
				margin-right: -2vw;
				img{
					width: 100%;
				}
			}
			h2{
				font-size: 1.4vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 0vw;
				letter-spacing: 0vw;
				color: #000000;
				margin-top: 3vw;
			}
			h3{
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 0vw;
				letter-spacing: 0vw;
				color: #939597;
				margin-top: 2vw;
			}
		}
		.step1:hover{
			transform: scale(1.5);
			transition: all .3s;
		}
		.stepArrow1{
			display: inline-block;
			margin-right: 6vw;
			margin-left: 5vw;
			width: 2vw;
			height: 3vw;
			// overflow: hidden;
			transform: translateY(-250%);
			img{
				width: 100%;
			}
			
		}
		.step2{
			display: inline-block;
			text-align: center;
			.imgBox{
				width: 12vw;
				height: 11vw;
				img{
					width: 100%;
				}
			}
			h2{
				font-size: 1.4vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 0vw;
				letter-spacing: 0vw;
				color: #000000;
				margin-top: 3vw;
				margin-left: -2.7vw;
			}
			h3{
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 0vw;
				letter-spacing: 0vw;
				color: #939597;
				margin-top: 2vw;
				margin-left: -2.7vw;
			}
		}
		.step2:hover{
			transform: scale(1.5);
			transition: all .3s;
		}
		.stepArrow2{
			display: inline-block;
			display: inline-block;
			margin-right: 6vw;
			margin-left: 5vw;
			width: 2vw;
			height: 3vw;
			transform: translateY(-250%);
			img{
				width: 100%;
			}
		}
		.step3{
			display: inline-block;
			.imgBox{
				width: 8vw;
				height: 9vw;
				img{
					width: 100%;
				}
			}
			h2{
				font-size: 1.4vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 0vw;
				letter-spacing: 0vw;
				color: #000000;
				margin-top: 3vw;
				margin-left: -1.5vw;
			}
			h3{
				font-size: 1vw;
				font-weight: normal;
				font-stretch: normal;
				line-height: 0vw;
				letter-spacing: 0vw;
				color: #939597;
				margin-top: 2vw;
				margin-left: -0.8vw;
			}
		}
		.step3:hover{
			transform: scale(1.5);
			transition: all .3s;
		}
	}
	.game{
		.turnGame{
			position: relative;
			padding-top: 2vw;
			padding-bottom: 2vw;
			.title{
				display: flex;
				justify-content: space-between;
				padding:7vw 53vw 2vw 18vw;
				.leftT{
					h2{
						font-size: 2vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 2vw;
						letter-spacing: 0vw;
						color: #000000;
						margin-bottom: 0.8vw;
					}
					h3{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #939597;
					}
				}
				.rightT{
					p{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1.5vw;
						letter-spacing: 0vw;
						color: #a7a7a7;
					}
				}
			}
			.item{
				display: flex;
				justify-content: space-between;
				padding-left: 17.8vw;
				padding-right: 17.8vw;
				.itemC{
					background-color: #eaeaea;
					// box-sizing: border-box;
					.gTitle{
						display: flex;
						justify-content: space-between;
						padding: 1vw;
						.gl{
							h1{
								font-size: 2vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #0a0a0a;
								margin-bottom: 1vw;
							}
							h2{
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #737373;
								margin-bottom: 0.2vw;
							}
							h3{
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #929292;
								margin-bottom: 0.6vw;
							}
							.line{
								width: 2vw;
								height: 0;
								border-top: 1px solid #808080;
							}
						}
						.gr{
							text-align: right;
							button{
								display: block;
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #ffffff;
								box-shadow: 0vw 0vw 0vw 0vw 
									rgba(9, 65, 60, 0.2);
								margin-bottom: 1.3vw;
								background-color: #11ad9f;
								padding: 0.4vw 1vw;
								border: none;
								border-radius: 10vw;
							}
							button:hover{
								cursor: pointer;
							}
							i{
								font-size: 2vw;
							}
						}
					}
					a{
						display: block;
						width: 20vw;
						height: 23vw;
						img{
							width: 100%;
						}
					}
				}
				.itemC:hover{
					transform: scale(1.1);
					transition: 0.3s;
				}
			}
			.left2{
				position: absolute;
				bottom: 13vw;
				width: 15vw;
				height: 13vw;
				img{
					width: 100%;
				}
			}
			.right2{
				position: absolute;
				right: 0;
				bottom: -12vw;
				width: 10vw;
				height: 11vw;
				img{
					width: 100%;
				}
			}
		}
		.lotteryGame{
			position: relative;
			padding-top: 2vw;
			padding-bottom: 2vw;
			.title{
				display: flex;
				justify-content: space-between;
				padding:7vw 51vw 2vw 18vw;
				.leftT{
					h2{
						font-size: 2vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 2vw;
						letter-spacing: 0vw;
						color: #000000;
						margin-bottom: 0.8vw;
					}
					h3{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #939597;
					}
				}
				.rightT{
					p{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1.5vw;
						letter-spacing: 0vw;
						color: #a7a7a7;
					}
				}
			}
			.item{
				display: flex;
				justify-content: space-between;
				padding-left: 17.8vw;
				padding-right: 17.8vw;
				.itemC{
					background-color: #eaeaea;
					// box-sizing: border-box;
					.gTitle{
						display: flex;
						justify-content: space-between;
						padding: 1vw;
						.gl{
							h1{
								font-size: 2vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #0a0a0a;
								margin-bottom: 1vw;
							}
							h2{
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #737373;
								margin-bottom: 0.2vw;
							}
							h3{
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #929292;
								margin-bottom: 0.6vw;
							}
							.line{
								width: 2vw;
								height: 0;
								border-top: 1px solid #808080;
							}
						}
						.gr{
							text-align: right;
							button{
								display: block;
								font-size: 1vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 1vw;
								letter-spacing: 0vw;
								color: #ffffff;
								box-shadow: 0vw 0vw 0vw 0vw 
									rgba(9, 65, 60, 0.2);
								margin-bottom: 1.3vw;
								background-color: #11ad9f;
								padding: 0.4vw 1vw;
								border: none;
								border-radius: 10vw;
							}
							i{
								font-size: 2vw;
							}
						}
					}
					a{
						display: block;
						width: 20vw;
						height: 23vw;
						img{
							width: 100%;
						}
					}
				}
				.itemC:hover{
					transform: scale(1.1);
					transition: 0.3s;
				}
			}
			.left2{
				img{
					
				}
			}
			.right2{
				img{
					
				}
			}
			.left3{
				position: absolute;
				width: 11vw;
				height: 10vw;
				bottom: 3vw;
				left: 2vw;
				img{
					width: 100%;
				}
			}
		}
	}
	.case{
		position: relative;
		.title{
			display: flex;
			justify-content: space-between;
			padding:7vw 47vw 2vw 18vw;
			.leftT{
				h2{
					font-size: 2vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 2vw;
					letter-spacing: 0vw;
					color: #000000;
					margin-bottom: 0.8vw;
				}
				h3{
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 1vw;
					letter-spacing: 0vw;
					color: #939597;
				}
			}
			.rightT{
				p{
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 1.5vw;
					letter-spacing: 0vw;
					color: #a7a7a7;
				}
			}
		}
		.caseC{
			padding: 1vw 16vw 2vw 18vw;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.caseBox{
				border-top: 1px solid #eae9e9;
				border-bottom: 1px solid #eae9e9;
				// width: 32vw;
				// box-sizing: border-box;
				display: flex;
				.cL{
					width: 4vw;
					height: 12vw;
					img{
						width: 100%;
					}
				}
				.cC{
					text-align: right;
					padding: 2vw 0.6vw;
					h1{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1vw;
						letter-spacing: 0vw;
						color: #000000;
						margin-bottom: 1.5vw;
					}
					h2{
						font-size: 1vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 1.8vw;
						letter-spacing: 0vw;
						color: #7c7c7c;
					}
				}
				.cR{
					width: 11vw;
					height: 12vw;
					position: relative;
					overflow: hidden;
					img{
						width: 100%;
					}
				}
				.mask{
					position: absolute;
					width: 100%;
					height: 100%;
					background-color: rgba(245,213,68,.8);
					opacity: 0;
					text-align: center;
					i{
						line-height: 12vw;
						font-size: 3vw;
						color: #FFFFFF;
					}
				}
				.cR:hover .mask{
					opacity: 1;
					cursor: pointer;
					
				}
			}
		}
		.right3{
			width: 10vw;
			height: 9vw;
			position: absolute;
			right: 3vw;
			top: 6vw;
			img{
				width: 100%;
			}
		}
	}
}